import { IToolBase } from './tools-base';
import { ToolModule } from './decorators/tools.module';
import { Subject } from 'rxjs';
import { ZTable } from '../../cors/table';
import { Single } from './decorators/single';
import { Select } from './decorators/select';
import { createElement } from '../../utils/dom-helper';
import { MergeCellPlugin } from '../../pugins/merge-cell.plugin';
import { ExecuteRecord } from '../../cors/execute-record';
import { BorderSelect } from './selects/border-select';
import { FillColor } from './selects/fill-color';
import { BorderType } from './variate';
import { FillPlugin } from '../../pugins/fill.plugin';
import { BorderPlugin } from '../../pugins/border.plugin';
import { NBorder } from '../../types/style.interface';

@ToolModule()
export class ToolsBar implements IToolBase {
    public statueChange$: Subject<{[key: string]: any}> = new Subject();
    public container: HTMLElement;
    constructor(protected tableIntance: ZTable) {
        this.container = createElement('div', 'tool-container');
        this.init();
    }
    public init() {

    }
    protected getMergeCellPlugin() {
        let mergeCellInstaince = this.tableIntance.pluginManager.getPlugin('MergeCellPlugin') as MergeCellPlugin;
        return mergeCellInstaince;
    }
    protected getExecuteRecord() {
        return this.tableIntance.pluginManager.getPlugin('ExecuteRecord') as ExecuteRecord;
    }
    protected getFillPlugin() {
        let plugin = this.tableIntance.pluginManager.getPlugin('FillPlugin') as FillPlugin;
        return plugin;
    }
    protected getBorderPlugin() {
        let plugin = this.tableIntance.pluginManager.getPlugin('BorderPlugin') as BorderPlugin;
        return plugin;
    }
    @Single({icon: 'selectoff', title: '取消选中', command: 'Ctrl D'})
    selectOff() {
        (<any>this.tableIntance.pluginManager.getPlugin('SelectPlugin')).clear();
    }
    @Single({icon: 'arrow-go-back-fill', title: '撤销', command: 'Ctrl Z'})
    public goBack() {
        this.getExecuteRecord().redo();
    }
    @Single({icon: 'arrow-go-forward-fill', title: '重做', command: 'Ctrl Y'})
    public goFroward() {
        this.getExecuteRecord().nextDo();
    }
    @Single({icon: 'merge-cells', title: '合并单元格'})
    public mergeCell() {
        this.getMergeCellPlugin().merge();
    }
    @Single({icon: 'solit-cells', title: '拆分单元格'})
    public spliteCell() {
        this.getMergeCellPlugin().unmerge();
    }
    @Select({icon: 'border-all', title: '',selsecClass: BorderSelect})
    public setBorder(value: {position: number, color: string, type: 'solid'|'dash'}) {
        let plugin = this.getBorderPlugin();
        let border = {
            color: value.color, 
            type: value.type == 'solid'? NBorder.EBorderType.solid : NBorder.EBorderType.dash,
            width: 1
        }
        if(value.position == BorderType.all) {
            plugin.setBorder('all', border);
        }
        if(value.position == BorderType.bottom) {
            plugin.setBorder('bottom', border);
        }
        if(value.position == BorderType.inside) {
            plugin.setBorder('inside', border);
        }
        if(value.position == BorderType.left) {
            plugin.setBorder('left', border);
        }
        if(value.position == BorderType.none) {
            plugin.setBorder('none', null);
        }
        if(value.position == BorderType.outer) {
            plugin.setBorder('outer', border);
        }
        if(value.position == BorderType.right) {
            plugin.setBorder('right', border);
        }
        if(value.position == BorderType.top) {
            plugin.setBorder('top', border);
        }
        console.log('sss')
    }
    @Select({icon: 'fill', title: '',selsecClass: FillColor})
    public fillBgColor(value: string) {
        this.getFillPlugin().fill(value);
    }
}